<template>
	<view class="">
		<z-paging v-model="list" ref="paging" :default-page-size="params.pageSize" @query="getList">
			<view v-for="agent in list" class="agent-box" :key="agent.id">
				<view class="flex">
					<image :src="agent.avatar" mode="" class="img-avatar"></image>
					<view class="agent-info flex item-center justify-between">
						<view>
							<view class="nick-name mb-4 fs-14">{{agent.nickName}}</view>
							<view class="gray">申请时间：{{ agent.createTime }}</view>
						</view>
						<view :style="{'color':getStatus(agent.auditState,'color')}">{{getStatus(agent.auditState,'text')}}</view>
					</view>
				</view>
				<view v-if="agent.applyReason" class="mt-16">申请理由：{{ agent.applyReason }}</view>
				<view v-if="agent.refuseReason" class="mt-8 red">原因：{{ agent.refuseReason }}</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { myApplyPage } from '@/pagesD/api/agent.js'
	const paging = ref()
	let list = ref([])
	let total = ref(0)
	const params = ref({
		pageNum: 1,
		pageSize: 15
	})
	const operMenu = ref([
		{
			title: '待审核',
			id:1,
			color:'rgba(252, 181, 19, 1)',
			text:'待审核'
		},
		{
			title: '已通过',
			id:2,
			color:'rgba(22, 190, 98, 1)',
			text:'已通过'
		},
		{
			title: '未通过',
			id:3,
			color:'rgba(51, 51, 51, 0.6)',
			text:'未通过'
		}
	])
	const getStatus = (txt,type) => {
		let arr = operMenu.value.filter((it)=> {return it.id==txt})
		if(arr.length && arr[0]){
			return arr[0][type]
		}
		return ''
	}
	const getList = async (num) => {
		uni.showLoading()
		params.pageNum = num
		let result = await myApplyPage({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
		}
		uni.hideLoading()
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.value.pageNum + 1
		getList()
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const onRefresh = () => {
		reFresh()
	}

</script>

<style lang="scss" scoped>
	.top{
		font-size: 12px;
		color: #FA4543;
	}

	.agent-box {
		font-size: 12px;
		padding: 8px 12px;
		margin: 0 20px 12px;
		background-color: #ffffff;
		border-radius: 8px;

		.agent-info {
			width: calc(100% - 60px);
			margin-left: 10px;
		}

		.img-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}

		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
		.gray{
			color: rgba(51,51,51,0.6);
		}
		.red{
			color: #FA4543;
		}
	}
</style>